<template>
  <div class="departments">
    <el-card class="box-card" v-loading="loading">
      <treeTools
        :treeNode="company"
        :isRoot="true"
        @addDept="addDept"
      ></treeTools>
      <el-divider></el-divider>
      <!-- :props="defaultProp" -->
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <treeTools
          slot-scope="{ data }"
          :treeNode="data"
          @getDep="getDep"
          @addDept="addDept"
          @editDept="doEdit"
        ></treeTools>
      </el-tree>

      <addDepts
        ref="dept"
        :dialogFormVisible.sync="dialogFormVisible"
        :pid="currentId"
        @getDep="getDep"
      ></addDepts>
    </el-card>
  </div>
</template>

<script>
import { getDepartments } from "@/api/departments";
import treeTools from "./components/tree-tools.vue";
import { arrayToTree } from "@/utils/index";
import addDepts from "./components/add-depts.vue";
export default {
  data() {
    return {
      data: [],
      company: { name: "深圳摸鱼有限公司", manager: "责任人", id: "" },
      dialogFormVisible: false,
      currentId: "",
      //页面页面默认
      loading: false,
    };
  },
  components: {
    treeTools,
    addDepts,
  },
  created() {
    //调用部门接口
    this.getDep();
  },
  methods: {
    async getDep() {
      this.loading = true;
      let res = await getDepartments();
      //   console.log(res);
      let list = res.data.depts;
      this.loading = false;
      this.data = arrayToTree(list, "");
    },
    //新增获取id
    addDept(id) {
      this.dialogFormVisible = true;
      this.currentId = id;
      //   console.log(this.currentId);
    },
    //编辑获取id
    doEdit(id) {
      //通过组件获取到add-depts里面的getDeptInfo方法
      this.$refs.dept.getDeptInfo(id);
      this.dialogFormVisible = true;
      this.currentId = id;
    },
  },
};
</script>

<style lang="scss">
.box-card {
  margin: 20px;
}
.el-card__body {
  padding: 60px 120px;
}
</style>